<template>
  <div class="m1 p_20" v-style="'boxstyle_1'">
    <Menus :dataSource="menuList" @change="menuChange" />
    <div class="select mt_20 pl_20">
      <span>所属分类：</span>
      <a-select v-model:value="category" style="width: 180px">
        <a-select-option v-for="(item,index) in dictList" :key="index"  @click="categoryChange(item)" :value="item.dict_value">{{ item.title }}</a-select-option>
      </a-select>
    </div>
    <div class="menu mt_20" :key="reload">
      <!-- 小标题 -->
      <Tabs :dataSource="tabList" @change="tapChange" />
      <!-- 内容 -->
      <div class="menuContent">
        <a-date-picker
          format='YYYY-MM-DD' 
          v-model="date"
          class="date-box"
          :open='yearShowOne' 
          @openChange="openChangeOne" 
          @change="panelChangeOne"/>
        <a-row>
          <a-col :xs="24" :sm="24" :md="10" :lg="10">
            <Pie style="height: 300px" :dataList="dataList"  />
          </a-col>
          <a-col :xs="24" :sm="24" :md="14" :lg="14">
            <Line style="height: 300px" :dataList="dataList" />
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
  <div class="m2 mt_20" v-style="'boxstyle_1'">
    <Table title="榜单详情"  :dataSource="list" :columns="columns" :pagination="pagination" @handleChangeList="handleChangeList">
      <template #header>
        <a-space>
          <a-button type="primary" @click="output">导出数据</a-button>
        </a-space>
      </template>
      <!-- <template v-slot:number>
        <div style="cursor: pointer;" @click="clickSort()">
          <span>序号</span>
          <span style="font-weight: bold;margin-left: 5px;">↕️</span>
        </div>
      </template> -->
      <template v-slot:host>
        <div style="cursor: pointer;" @click="clickSort('host')">
          <span>网址</span>
          <span style="font-weight: bold;margin-left: 5px;">↕️</span>
        </div>
      </template>
      <template v-slot:qz>
        <div style="cursor: pointer;" @click="clickSort('yd_weight')">
          <span>权重</span>
          <span style="font-weight: bold;margin-left: 5px;">↕️</span>
        </div>
      </template>
      <template v-slot:qzzd>
        <div style="cursor: pointer;" @click="clickSort('yd_weight_rose_fall')">
          <span>权重涨跌</span>
          <span style="font-weight: bold;margin-left: 5px;">↕️</span>
        </div>
      </template>
      <template v-slot:ygll>
        <div style="cursor: pointer;" @click="clickSort('estimate_flow')">
          <span>预估流量</span>
          <span style="font-weight: bold;margin-left: 5px;">↕️</span>
        </div>
      </template>
      <template v-slot:llzd>
        <div style="cursor: pointer;" @click="clickSort('gg_weight_rose_fall')">
          <span>流量涨跌</span>
          <span style="font-weight: bold;margin-left: 5px;">↕️</span>
        </div>
      </template>
      <template v-slot:gjcs>
        <div style="cursor: pointer;" @click="clickSort('keyword_count')">
          <span>关键词数</span>
          <span style="font-weight: bold;margin-left: 5px;">↕️</span>
        </div>
      </template>
      <template v-slot:cszd>
        <div style="cursor: pointer;" @click="clickSort('keyword_rose_fall')">
          <span>词数涨跌</span>
          <span style="font-weight: bold;margin-left: 5px;">↕️</span>
        </div>
      </template>
      <template v-slot:sy>
        <div style="cursor: pointer;" @click="clickSort('index_count')">
          <span>索引</span>
          <span style="font-weight: bold;margin-left: 5px;">↕️</span>
        </div>
      </template>
      <template v-slot:syzd>
        <div style="cursor: pointer;" @click="clickSort('index_rose_fall')">
          <span>索引涨跌</span>
          <span style="font-weight: bold;margin-left: 5px;">↕️</span>
        </div>
      </template>
      <template #yd_weight_rose_fall="item">
        <div :style="{color: item.value > 0 ? '#ff6e6e' : '#2ccdc5'}">
          <CaretUpOutlined v-if="item.value > 0" />
          <CaretDownOutlined v-else />
          <span>{{ item.value || 0 }}</span>
        </div>
      </template>
      <template #keyword_rose_fall="item">
        <div :style="{color: item.value > 0 ? '#ff6e6e' : '#2ccdc5'}">
          <CaretUpOutlined v-if="item.value > 0" />
          <CaretDownOutlined v-else />
          <span>{{ item.value || 0 }}</span>
        </div>
      </template>
      <template #keyword_count="item">
          <span>{{ item.value || 0 }}</span>
      </template>
      <template #gg_weight_rose_fall="item">
        <div :style="{color: item.value > 0 ? '#ff6e6e' : '#2ccdc5'}">
          <CaretUpOutlined v-if="item.value > 0" />
          <CaretDownOutlined v-else />
          <span>{{ item.value || 0 }}</span>
        </div>
      </template>
      <template #index_rose_fall="item">
        <div :style="{color: item.value > 0 ? '#ff6e6e' : '#2ccdc5'}">
          <CaretUpOutlined v-if="item.value > 0" />
          <CaretDownOutlined v-else />
          <span>{{ item.value || 0 }}</span>
        </div>
      </template>
      <template #index_count="item">
          <span>{{ item.value || 0 }}</span>
      </template>
      <template #hostUrl="{ value }">
        <a :href="'http://' + value" target="_blank">{{ value }}</a>
      </template>
      <template #estimate_flow="{ record }">
        <a :href="'https://baidurank.aizhan.com/baidu/' + record.host" target="_blank">{{ record.estimate_flow || 0 }}</a>
      </template>
      <template #yd_weight="{ record }">
        <a :href="'https://baidurank.aizhan.com/baidu/' + record.host" target="_blank">{{ record.yd_weight || 0 }}</a>
      </template>
    </Table>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import Menus from "@/components/Menus";
import Tabs from "@/components/Tabs";
import Table from "@/components/Table";
import Pie from "./components/Pie.vue";
import Line from "./components/Line.vue";
import { bigDataApi } from "@/api/bigData";
import { dictApi } from "@/api/dict";
import store from "@/store";

const list = ref([]);
const dataList = ref([]); 
const clickType = ref('');
const dictList = ref([]);
let is_asc = 0;
let pagination =ref({
  total: 0,
  current: 1,
  defaultPageSize: 10,
  showSizeChanger: true,
  pageSizeOptions: ['10', '50', '100']
})
let currentPage = 1;
let pageNum = 10;

const menuList = ref(["权重变动", "预估流量变动", "关键词变动", "索引变动"]);
const menuClick = ref(1);
const tabClick = ref(0)
const reload = ref<Number>(0);

const date = ref('')
const yearShowOne = ref(false)

// 弹出日历和关闭日历的回调
function openChangeOne(status){
  // console.log(status)
	//status是打开或关闭的状态
  if(status){
    yearShowOne.value =  true
  }
 }
// 得到年份选择器的值
function panelChangeOne(value){
    // console.log(value)
    date.value = value.$y + '-' + (value.$M >= 9 ? (value.$M + 1) : '0' + (value.$M + 1)) + '-' + (value.$D >= 10 ? value.$D : ('0' + value.$D)  )
    // console.log(date.value)
    yearShowOne.value = false
    getQZData()
 }

onMounted(() => {
  // 获取当前日期
  getNowFormatTime();
  // 权重变化
  // getQZData();
  
  // menuChange(1);
  columns.value.push(
    {
      title: "序号",
      dataIndex: "id",
      width: 100
    },
    {
      slots: {title: "host", customRender: "hostUrl"},
      dataIndex: "host",
      width: 200
    },
    {
      // title: "权重",
      dataIndex: "yd_weight",
      slots: { title: "qz", customRender: "yd_weight"},
    },
    {
      // title: "权重涨跌",
      dataIndex: "yd_weight_rose_fall",
      slots: { title: "qzzd", customRender: "yd_weight_rose_fall" },
    },
    {
      // title: "预估流量",
      dataIndex: "estimate_flow",
      slots: { title: "ygll", customRender: "estimate_flow" },
    },
    {
      // title: "流量涨跌",
      dataIndex: "gg_weight_rose_fall",
      slots: { title: "llzd", customRender: "gg_weight_rose_fall" },
    }
  )
  // 榜单详情列表
  getSynthesizeList();
  getDict();
});

//获取当前时间，格式YYYY-MM-DD
function getNowFormatTime() {
    var nowDate = new Date();
    var colon = "-";
    var day = nowDate.getDate();
    var month = nowDate.getMonth() + 1;//注意月份需要+1
    var year = nowDate.getFullYear();
    //补全0，并拼接
    date.value = year + colon + month + colon + day;
    console.log(date.value);
}

//补全0
function completeDate(value) {
    return value < 10 ? "0"+value:value;
}

// 获取分类
async function getDict() {
  const data = await dictApi.getChildren({
    id: 3
  });
  dictList.value = data;
  category.value = dictList.value[0].title;
  dictId.value = dictList.value[0].id;
  getQZData();
}

// 重新排序
function clickSort(type){
  if(is_asc == 0){
    is_asc = 1
  }else{
    is_asc = 0
  }
  currentPage = 1;
  pagination.value.current = 1;
  clickType.value = type;
  getSynthesizeList();
}

async function getSynthesizeList() {
  const result = await bigDataApi.synthesizeList({
    page: currentPage,
    limit: pageNum,
    token: store.getters.user.token,
    is_desc: is_asc == 0 ? 'asc' : 'desc',  // desc 降序， asc 升序
    field: clickType.value
  });
  const { data } = result
  pagination.value.total = data.total
  list.value = data.data
}
function handleChangeList(e){
  currentPage = e.current //当前页数
  pageNum = e.pageSize //每页显示条数
  pagination.value.current = e.current;
  getSynthesizeList()
}
async function getQZData() {
  const result = await bigDataApi.weightChange({
    type: menuClick.value,
    dict_id: dictId.value,
    channel: tabClick.value,
    token: store.getters.user.token,
    date: date.value
  });
  const { data } = result;
  dataList.value = data
  console.log(result)
}



function menuChange(key: string) {
  menuClick.value = key
  columns.value = []
  //过滤掉需要隐藏的字段
  if (menuClick.value == 1) { 
    // columns.value = columns.value.filter(item => 
    // item.dataIndex == 'id' || 
    // item.dataIndex == 'host' ||
    // item.dataIndex == 'yd_weight' ||
    // item.dataIndex == 'yd_weight_rose_fall'
    // ) 
    columns.value.push(
      {
        title: "序号",
        dataIndex: "id",
        width: 100
      },
      {
        slots: {title: "host", customRender: "hostUrl"},
        dataIndex: "host",
        width: 200
      },
      {
        // title: "权重",
        dataIndex: "yd_weight",
        slots: { title: "qz", customRender: "yd_weight"},
      },
      {
        // title: "权重涨跌",
        dataIndex: "yd_weight_rose_fall",
        slots: { title: "qzzd", customRender: "yd_weight_rose_fall" },
      },
      {
        // title: "预估流量",
        dataIndex: "estimate_flow",
        slots: { title: "ygll", customRender: "estimate_flow" },
      },
      {
        // title: "流量涨跌",
        dataIndex: "gg_weight_rose_fall",
        slots: { title: "llzd", customRender: "gg_weight_rose_fall" },
      }
    )
  }else if (menuClick.value == 2) { 
     columns.value.push(
      {
        title: "序号",
        dataIndex: "id",
        width: 100
      },
      {
        slots: {title: "host", customRender: "hostUrl"},
        dataIndex: "host",
        width: 200
      },
      {
        // title: "权重",
        dataIndex: "yd_weight",
        slots: { title: "qz", customRender: "yd_weight"},
      },
      {
        // title: "权重涨跌",
        dataIndex: "yd_weight_rose_fall",
        slots: { title: "qzzd", customRender: "yd_weight_rose_fall" },
      },
      {
        // title: "预估流量",
        dataIndex: "estimate_flow",
        slots: { title: "ygll", customRender: "estimate_flow" },
      },
      {
        // title: "流量涨跌",
        dataIndex: "gg_weight_rose_fall",
        slots: { title: "llzd", customRender: "gg_weight_rose_fall" },
      }
    )
  }else if (menuClick.value == 3) { 
     columns.value.push(
      {
        title: "序号",
        dataIndex: "id",
        width: 100
      },
      {
        slots: {title: "host", customRender: "hostUrl"},
        dataIndex: "host",
        width: 200
      },
      {
        // title: "权重",
        dataIndex: "yd_weight",
        slots: { title: "qz", customRender: "yd_weight"},
      },
      {
        // title: "权重涨跌",
        dataIndex: "yd_weight_rose_fall",
        slots: { title: "qzzd", customRender: "yd_weight_rose_fall" },
      },
      {
        // title: "预估流量",
        dataIndex: "estimate_flow",
        slots: { title: "ygll", customRender: "estimate_flow" },
      },
      {
        // title: "流量涨跌",
        dataIndex: "gg_weight_rose_fall",
        slots: { title: "llzd", customRender: "gg_weight_rose_fall" },
      }
    )
  }else if (menuClick.value == 4) { 
     columns.value.push(
      {
        title: "序号",
        dataIndex: "id",
        width: 100
      },
      {
        slots: {title: "host", customRender: "hostUrl"},
        dataIndex: "host",
        width: 200
      },
      {
        // title: "关键词数",
        dataIndex: "keyword_count",
        slots: { title: "gjcs", customRender: "keyword_count" },
      },
      {
        // title: "词数涨跌",
        dataIndex: "keyword_rose_fall",
        slots: { title: "cszd", customRender: "keyword_rose_fall" },
      },
      {
        // title: "索引",
        dataIndex: "index_count",
        slots: { title: "sy", customRender: "index_count" },
      },
      {
        // title: "索引涨跌",
        dataIndex: "index_rose_fall",
        slots: { title: "syzd", customRender: "index_rose_fall" },
      }
    )
  }
  reload.value++;
  getQZData();
}

const tabList = ref(["总览", "百度", "搜狗", "360", "神马"]);
function tapChange(key: number) {
  tabClick.value = key - 1
  // console.log(tabClick.value);
  getQZData();
}
// 所属类型
const category = ref<string>();
const dictId = ref();
function categoryChange(e) {
  // console.log(1111)
  // console.log(e);
  category.value = e.title;
  dictId.value = e.id;
  getQZData();
}

const columns = ref([
  // // {
  // //   slots: {title: "number"},
  // //   dataIndex: "id",
  // //   width: 80
  // // },
  // {
  //   title: "序号",
  //   dataIndex: "id",
  // },
  // {
  //   slots: {title: "host", customRender: "hostUrl"},
  //   dataIndex: "host",
  // },
  // {
  //   title: "权重",
  //   dataIndex: "yd_weight",
  //   slots: { customRender: "yd_weight"},
  // },
  // {
  //   title: "权重涨跌",
  //   dataIndex: "yd_weight_rose_fall",
  //   slots: { customRender: "yd_weight_rose_fall" },
  // },
  // {
  //   title: "关键词数",
  //   dataIndex: "keyword_count",
  //   slots: { customRender: "keyword_count" },
  // },
  // {
  //   title: "词数涨跌",
  //   dataIndex: "keyword_rose_fall",
  //   slots: { customRender: "keyword_rose_fall" },
  // },
  // {
  //   title: "预估流量",
  //   dataIndex: "estimate_flow",
  //   slots: { customRender: "estimate_flow" },
  // },
  // {
  //   title: "流量涨跌",
  //   dataIndex: "gg_weight_rose_fall",
  //   slots: { customRender: "gg_weight_rose_fall" },
  // },
  // {
  //   title: "索引",
  //   dataIndex: "index_count",
  //   slots: { customRender: "index_count" },
  // },
  // {
  //   title: "索引涨跌",
  //   dataIndex: "index_rose_fall",
  //   slots: { customRender: "index_rose_fall" },
  // },
]);


function output() {
  bigDataApi.synthesizeExport();
}
</script>

<style lang="less" scoped>
.m1,
.m2 {
  border: 1px solid #1f2327;
}
.select {
  /deep/ .ant-select {
    color: #fff;
  }
  /deep/ .ant-select-selector {
    background: transparent;
  }
  /deep/.ant-select-arrow {
    color: #fff;
  }
}
.menu {
}
.menuContent {
  background: transparent;
  border: none;
  color: #fff;
  margin: 10px 0;
  padding: 10px;
  /deep/ .ant-select-selector {
    background: transparent;
    color: #fff;
  }
  /deep/ .ant-select-arrow {
    color: #fff;
  }
}
/deep/ .menu{
  width: 100%;
}
.date-box{
  width: 20%;
  position: absolute;
  right: 0;
  z-index: 1000;
  background: transparent;
}
/deep/.ant-picker-input > input{
  color: #fff !important;
}
</style>
